﻿<!DOCTYPE html>
<html>
<head>
   
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    
<meta name="renderer" content="webkit|ie-comp|ie-stand">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta http-equiv="Cache-Control" content="no-siteapp" />
   <link rel="stylesheet" href="font/css/font-awesome.min.css" />
            
          <link rel="stylesheet" href="css/wt_map_style.css" />
      
       
    <title>关键字查询</title>
    <style type="text/css">
		
     
    </style>
</head>
<body>
   
    <div class="main-container" >
      	<button onclick="window.history.go(-1);" class="btn btn-secondary  btn-warning" type="button"><i class="fa fa-reply"></i> 返回上一步</button>
       <!-- <div class="search-form" style="display:none">
            <form id="form1">
            <input type="text" id="SearchKey" style="width: 400px;" />
            <input type="button" id="btn_Search" value="查询" onclick="placeSearch();" />
            </form>
            <div id="tip">
                <input type="button" value="结束编辑多边形" onclick="endEddit()" />
                <input type="button" value="开始编辑多边形" onclick="edditpolygon()" />
            </div>
        </div>-->
        <div id="mapContainer">
        </div>
    </div>
    <script type="text/javascript" src="http://webapi.amap.com/maps?v=1.3&key=1994ba35a603f806df16000f3799b1da"></script>
    <script type="text/javascript">
        var marker;
        var windowsArr;
        var toolBar = null;
        var overView;
        var editorTool;
        var map = new AMap.Map("mapContainer", {
            resizeEnable: true,zoom:12
        });
        map.plugin(["AMap.ToolBar"], function () {
            toolBar = new AMap.ToolBar();
            map.addControl(toolBar);
        });
        //在地图中添加鹰眼插件
        map.plugin(["AMap.OverView"], function () {
            //加载鹰眼
            //初始化隐藏鹰眼
            overView = new AMap.OverView({
                visible: true
            });
            map.addControl(overView);
        });
        //添加地图类型切换插件
        map.plugin(["AMap.MapType"], function () {
            //地图类型切换
            var mapType = new AMap.MapType({
                defaultType: 0, //默认显示卫星图
                showRoad: true //叠加路网图层
            });
            map.addControl(mapType);
        });
        //加载比例尺插件
        map.plugin(["AMap.Scale"], function () {
            scale = new AMap.Scale();
            map.addControl(scale);
        });
        //基本地图加载
        function placeSearch() {
            map = new AMap.Map("mapContainer", {
                resizeEnable: true
            });
            map.plugin(["AMap.ToolBar"], function () {
                toolBar = new AMap.ToolBar();
                map.addControl(toolBar);
            });
            //在地图中添加鹰眼插件
            map.plugin(["AMap.OverView"], function () {
                //加载鹰眼
                //初始化隐藏鹰眼
                overView = new AMap.OverView({
                    visible: true
                });
                map.addControl(overView);
            });
            //添加地图类型切换插件
            map.plugin(["AMap.MapType"], function () {
                //地图类型切换
                var mapType = new AMap.MapType({
                    defaultType: 0, //默认显示卫星图
                    showRoad: true //叠加路网图层
                });
                map.addControl(mapType);
            });
            //加载比例尺插件
            map.plugin(["AMap.Scale"], function () {
                scale = new AMap.Scale();
                map.addControl(scale);
            });
            //设置多边形的属性
            var polygonOption = {
                strokeColor: "#0000ff",
                strokeOpacity: 1,
                strokeWeight: 3
            };
            var polygonArr;
            //在地图中添加MouseTool插件
            map.plugin(["AMap.MouseTool"], function () {
                var mouseTool = new AMap.MouseTool(map);
                //使用鼠标工具绘制多边形
                mouseTool.polygon(polygonOption);
                AMap.event.addListener(mouseTool, "draw", function (e) {
                    //obj属性就是绘制完成的覆盖物对象
                    var drawObj = e.obj;
                    //获取节点个数
                    var pointsCount = e.obj.getPath().length;

                    polygonArr = new Array(); //构建多边形经纬度坐标数组
                    for (var i = 0; i < pointsCount; i++) {
                        polygonArr.push(new AMap.LngLat(e.obj.getPath()[i].lng, e.obj.getPath()[i].lat));
                    }
                    var polygon = new AMap.Polygon({
                        map: map,
                        path: polygonArr,
                        fillColor: "#f5deb3",
                        fillOpacity: 0.35
                    });
                    //添加编辑控件
                    map.plugin(["AMap.PolyEditor"], function () {
                        editorTool = new AMap.PolyEditor(map, polygon);
                    });
                });
            });

            marker = new Array();
            windowsArr = new Array();
            var searchKey = document.getElementById("SearchKey").value;
            var MSearch;
            AMap.service(["AMap.PlaceSearch"], function () {
                MSearch = new AMap.PlaceSearch({ //构造地点查询类
                    pageSize: 10,
                    pageIndex: 1,
                    city: "021" //城市
                });
                //关键字查询
                MSearch.search(searchKey, function (status, result) {
                    if (status === 'complete' && result.info === 'OK') {
                        keywordSearch_CallBack(result);
                    }
                });
            });
        }
        function edditpolygon() {
            editorTool.open();
        }
        function endEddit() {
            editorTool.close();
        }
        //添加marker&infowindow   
        function addmarker(i, d) {
            var lngX = d.location.getLng();
            var latY = d.location.getLat();
            var markerOption = {
                map: map,
                icon: "http://webapi.amap.com/images/" + (i + 1) + ".png",
                position: new AMap.LngLat(lngX, latY),
                topWhenMouseOver: true

            };
            var mar = new AMap.Marker(markerOption);
            marker.push(new AMap.LngLat(lngX, latY));

            var infoWindow = new AMap.InfoWindow({
                content: "<h3><font color=\"#00a6ac\">  " + (i + 1) + ". " + d.name + "</font></h3>" + TipContents(d.type, d.address, d.tel),
                size: new AMap.Size(300, 0),
                autoMove: true,
                offset: new AMap.Pixel(0, -20)
            });
            windowsArr.push(infoWindow);
            var aa = function (e) { infoWindow.open(map, mar.getPosition()); };
            AMap.event.addListener(mar, "mouseover", aa);
        }
        //回调函数
        function keywordSearch_CallBack(data) {
            var resultStr = "";
            var poiArr = data.poiList.pois;
            var resultCount = poiArr.length;
            for (var i = 0; i < resultCount; i++) {
                resultStr += "<div id='divid" + (i + 1) + "' onmouseover='openMarkerTipById1(" + i + ",this)' onmouseout='onmouseout_MarkerStyle(" + (i + 1) + ",this)' style=\"font-size: 12px;cursor:pointer;padding:0px 0 4px 2px; border-bottom:1px solid #C1FFC1;\"><table><tr><td><img src=\"http://webapi.amap.com/images/" + (i + 1) + ".png\"></td>" + "<td><h3><font color=\"#00a6ac\">名称: " + poiArr[i].name + "</font></h3>";
                resultStr += TipContents(poiArr[i].type, poiArr[i].address, poiArr[i].tel) + "</td></tr></table></div>";
                addmarker(i, poiArr[i]);
            }
            map.setFitView();
        }
        function TipContents(type, address, tel) {  //窗体内容
            if (type == "" || type == "undefined" || type == null || type == " undefined" || typeof type == "undefined") {
                type = "暂无";
            }
            if (address == "" || address == "undefined" || address == null || address == " undefined" || typeof address == "undefined") {
                address = "暂无";
            }
            if (tel == "" || tel == "undefined" || tel == null || tel == " undefined" || typeof address == "tel") {
                tel = "暂无";
            }
            var str = "  地址：" + address + "<br />  电话：" + tel + " <br />  类型：" + type;
            return str;
        }
        function openMarkerTipById1(pointid, thiss) {  //根据id 打开搜索结果点tip
            thiss.style.background = '#CAE1FF';
            windowsArr[pointid].open(map, marker[pointid]);
        }
        function onmouseout_MarkerStyle(pointid, thiss) { //鼠标移开后点样式恢复
            thiss.style.background = "";
        }
    </script>
</body>
</html>
